<template>
    <div class="welcome-wrapper">
        <div class="wrapper-left">
            <div class="title">欢迎体验</div>
            <div class="text">云顶之弈包吃鸡系统</div>
            <div class="message">++++++++ 包吃鸡，必吃鸡！！！</div>
        </div>
        <div class="wrapper-right">
            <img class="welcome-img" src="../assets/images/welcome.png" alt="图片加载失败">
        </div>
    </div>
</template>

<script>
export default {
    name: 'Welcome',
    setup() {
        
    },
}
</script>

<style lang="scss">
.welcome-wrapper {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .wrapper-left {
        margin-right: 300px;
        position: relative;
        bottom: 50px;
        .title {
             font-weight: bold;
            font-size: 30px;
            line-height: 40px;
            color: #352a35;
        }
        .text {
            font-size: 50px;
            line-height: 60px;
            color: #00BBFF;
        }
        .message {
            font-size: 20px;
            line-height: 20px;
            color: #999;
            text-align: right;
        }
    }
    .wrapper-right {
        .welcome-img {
            width: 371px;
            height: 438px;
        }
    }
}
</style>